<!--
 * @Description: 自定义 悬浮异形 tabbar 
-->
<template>
	<view class="tqb-tabbar">

		<view class="tqb-tabbar-body" :style="{paddingBottom:`${iosSABottom}px`}">
			<view class="tqb-tabbar-item" v-for="(item, index) in tabBarList" :key="index"
				@click="switchClick(item, index)">
				<view  class="tabbar-item-body">
					<view class="tabbar-item-icon">
						<image :src="activeIndex == index ? item.selectedIconPath : item.iconPath"
							:style="'width:'+item.size+'rpx; height:' +item.size+'rpx;'"></image>
					</view>
					<view :class="[activeIndex == index ? 'active' : '', 'tab-bar-text']">{{ item.text }}</view>
					<button open-type="contact" v-if="item.pagePath=='service'"></button>
				</view>
				
				<!-- v-if="index !== 2" -->
				<!-- <view v-else class="add-icon">
					<image :src="item.iconPath" style="width: 80rpx; height: 80rpx;"></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['activeIndex'],
	data() {
		return {
			tabBarList: [{
				text: '推荐',
				iconPath: '/static/tqb-tabbar/home_off.png',
				selectedIconPath: '/static/tqb-tabbar/home_on.png',
				pagePath: '/pages/index_/index',
				size:36
			},{
				text: '看看',
				iconPath: '/static/tqb-tabbar/social_off.png',
				selectedIconPath: '/static/tqb-tabbar/social_on.png',
				pagePath: '/pages/forum/forum',
				size:36
			},{
				text: '客服',
				iconPath: '/static/tqb-tabbar/service_off.png',
				selectedIconPath: '/static/tqb-tabbar/service_on.png',
				pagePath: 'service',
				size:36
			},{
				text: '我的',
				iconPath: '/static/tqb-tabbar/work_off.png',
				selectedIconPath: '/static/tqb-tabbar/work_on.png',
				pagePath: '/pages/me/me',
				size:36
			}],
			// handleList: [{
			// 	imageUrl: '/static/tqb-tabbar/work_on.png',
			// 	text: '添加页面',
			// 	url: `/pages/index/index`
			// }, {
			// 	imageUrl: '/static/tqb-tabbar/work_on.png',
			// 	text: '添加页面',
			// 	url: `/pages/index/index`
			// }],
			visible: false,
			iosSABottom:0
		}
	},
	watch: {
		visible: function (d) {
			// todo anything
		}
	},
	mounted() {
		 let systemInfo = uni.getSystemInfoSync();
	  let iosSABottom = Number(systemInfo.screenHeight - systemInfo.safeArea.bottom);	
	},
	methods: {
		switchClick(data, index) {
			if (index == this.activeIndex) {
				return
			}
			// if (index === 2) {
			// 	uni.navigateTo({
			// 		url:'/pages/createActivity/createActivity'
			// 	})
			// }
			this.handleClose()
			uni.switchTab({
				url: data.pagePath
			});
		},
		handleClose() {
			this.visible = false;
			if (this.activeIndex == 1) {
				uni.$emit('hideCanvas', false)
			}
		},
		handleOpenPage(item) {
			let that = this
			setTimeout(function () {
				that.handleClose()
			}, 500)
			uni.navigateTo({
				url: item.url
			})
		},
		handleClick(item) {
			let that = this
			that.handleOpenPage(item)
			// that.$u.throttle(that.handleOpenPage(item), 500)
		}
	}
}
</script>

<style lang="scss" scoped>
.tqb-tabbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999998;
}

.tqb-tabbar-body {
	// border-radius: 80rpx;
	height: 100rpx;
	display: flex;
	background: linear-gradient(to right, #ffffff, #fff9ed);
	position: fixed;
	bottom: 0;
	width: 100vw;
	left: 0;
	z-index: 9001;
	padding-top: 20rpx;
	box-shadow: 0px 0px 22rpx 9rpx rgba(0, 0, 0, 0.1);

	.tqb-tabbar-item {
		flex: 1;
		display: flex;
		justify-content: center;
		text-align: center;

		.tabbar-item-body {
			position: relative;
    button{
    	opacity: 0 !important;
    	border-radius: 0 !important;
    	padding: 0 !important;
    	font-size: 28upx !important;
    	line-height: 1.5em !important;
    	text-align: left !important;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			z-index: 9;
    }
    button::after {
    		border: none;
    	}
    	
		}

		.tabbar-item-icon {
			display: flex;
			justify-content: center;
		}

		.tab-bar-text {
			color: #999999;
			font-size: 22rpx;
			margin-top: 8rpx;
		}

		.active {
			color: #333;
		}

		.add-icon {
			width: 70rpx;
			height: 70rpx;
			
			// position: relative;
			// top: -8rpx;
		}
	}
}

.tqb-tabbar-popup {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.49) 32%, rgba(0, 0, 0, 0.66) 100%);
	height: 660rpx;

	.mask-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.popup-body {
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		top: 142rpx;
		width: 100%;

		.popup-item {
			width: 20%;
			margin-bottom: 20rpx;
			text-align: center;

			.popup-item-icon {
				display: flex;
				justify-content: center;
			}

			.popup-item-text {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
}
</style>
